﻿import { Directive, ElementRef, Input, Renderer,OnChanges } from '@angular/core';
import { Genres } from '../../model/genres';
import { ApiService } from '../../services/app.service.api';
declare var Morris;

@Directive({
    selector: '[myChart]'
})
export class MyChartDirective implements OnChanges {
    @Input('myChart') genres: Genres[];
    constructor(private el: ElementRef, renderer: Renderer, private apiService: ApiService) {
    }

    ngOnChanges() {
        if (this.genres) {
            Morris.Bar({
                element: this.el.nativeElement,
                data: this.genres,
                xkey: "Name",
                ykeys: ["NumberOfMovies"],
                labels: ["Number Of Movies"],
                barRatio: 0.4,
                xLabelAngle: 55,
                hideHover: "auto",
                resize: 'true'
            });
        }  
    }
}
